<template>
  <div>
    <div class="appBox">
      <div class="topReturn flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">修改文案配置</div>
        </div>
        <div>

        </div>
      </div>
      <div class="top">
        <div class="flex">
          <div class="title f16 mr30">
            邀请好友页面转发文案
          </div>
          <div class="">{参数1}为发起邀请人用户名称</div>
        </div>
        <div class="mt30">
          <el-input v-model="state.content"
                    placeholder="{参数1}邀请加入兜兜智聘用工平台，入职即可获得奖励"
                    :autosize="{ minRows: 2, maxRows:  8}"
                    type="textarea"></el-input>

        </div>
        <div class="flex mt30">
          <div class="title f16 mr30">
            预览图片配置
          </div>
          <div class="">为微信聊天窗口转发的预览图片</div>
          <div class="flex1 tar">

            <el-button v-preventReClick
                       type="primary"
                       @click="methods.submit">保存</el-button>
          </div>
        </div>
        <div class="mt30">
          <div class="imgBox">
            <div v-for="(i,k) in state.imgList"
                 :key="k">
              <div class="imgBorderBox flex_c"
                   :class="{'active':state.active == i.id}"
                   @click="state.active = i.id">
                <img :src="JSON.parse(i.url)[0].url"
                     style="width: 90px;height: 120px;margin: 10px;"
                     alt="">
              </div>

              <!-- <el-image style="width: 180px; height: 90px;margin-top: 10px;margin-right:10px ;"
                        :key="i"
                        :src="i"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :preview-teleported="true"
                        :min-scale="0.2"
                        :preview-src-list="JSON.parse(1 ? 1 : '{}')"
                        :initial-index="k"
                        fit="cover" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const route = useRoute();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    dialogVisible: false,
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      name: "",
      time: '',
    },
    valueInput: '',
    dialogData: '',
    imgList: [],
    active: '',
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
  methods.getImgList();
});
const methods = {
  submit () {
    console.log(state.tableData);
    app.$post('/sysShare/update', {
      content: state.content,
      id: route.query.id,
      pictureList: state.active ? [{ 'id': state.active }] : []
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '保存成功',
          type: 'success'
        })
        app.$router.go(-1)
        methods.getDataList()
      }
    })
  },
  handleAction (type, data) {
    switch (type) {

      case "subAdd": //保存
        methods.subData()
        break;


    }
  },
  getImgList () {
    console.log(11);
    app.$get('/sysPicture/getListByType', { type: 0 }).then(res => {
      console.log(res);
      if (res.code == 200) {
        state.imgList = res.data
      }
    })
  },


  getDataList () {
    app.$get("/sysShare/getById", { id: route.query.id })
      .then((res) => {
        if (res.code == 200) {
          state.active = res.data.pictureList[0]?.id
          state.content = res.data.content
        }

      });
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>


<style lang="scss" scoped>
.active {
  border: 2px solid #409eff !important;
}
.imgBorderBox {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #ccc;
  margin: 0 10px 10px 0;
}
.topReturn {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
.top {
  padding: 30px 40px;
  border-radius: 5px;
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
}
</style>